// @ts-nocheck
import React, { useState } from "react";
import { Form, Input } from "antd";
import { filter } from "./helpers";

export default ({ children = [], ...attrs } = {}) => {
  const [form] = Form.useForm();
  const [formData, setFormData] = useState()
  
  return (
    <Form
      form={form}
      {...attrs}
      onFieldsChange={(_, allFields) => {
        const fields = allFields.map(item => item.name[0])
        setFormData(form.getFieldsValue(fields));
      }}
    >
      {filter(children, formData).map(
          ({ name, value = '', render = () => <Input type="text" placeholder="请输入" allowClear />, ...attrs }) => {
            return (
              <Form.Item
                name={name}
                initialValue={value}
                {...attrs}
                key={name}
              >
                {render()}
              </Form.Item>
            );
          }
        )}
    </Form>
  );
};
